<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col v-if="type === 9" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            新增员工
          </el-button>
        </el-col>
        <el-col
          :xs="16"
          :sm="16"
          :md="16"
          :lg="16"
          :xl="16"
          style="float: right;"
        >
          <div class="search">
            <el-row :gutter="20">
              <el-col
                :xs="2"
                :sm="2"
                :md="2"
                :lg="2"
                :xl="2"
                style="float: right;"
              >
                <el-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  class="fr"
                  @click="search"
                >
                  搜索
                </el-button>
              </el-col>
              <el-col
                :xs="5"
                :sm="5"
                :md="5"
                :lg="5"
                :xl="5"
                style="float: right;"
              >
                <el-input
                  v-model="selectForm.mobile"
                  size="medium"
                  placeholder="联系方式"
                  clearable
                ></el-input>
              </el-col>
              <el-col
                :xs="5"
                :sm="5"
                :md="5"
                :lg="5"
                :xl="5"
                style="float: right;"
              >
                <el-input
                  v-model="selectForm.name"
                  size="medium"
                  placeholder="姓名"
                  clearable
                ></el-input>
              </el-col>
              <el-col
                :xs="5"
                :sm="5"
                :md="5"
                :lg="5"
                :xl="5"
                style="float: right;"
              >
                <el-select
                  v-model="selectForm.type"
                  size="medium"
                  clearable
                  placeholder="选择权限"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="9" label="系统管理员" :value="9"></el-option>
                  <el-option :key="1" label="部门领导" :value="3"></el-option>
                  <el-option :key="2" label="员工" :value="1"></el-option>
                  <el-option :key="3" label="上门服务" :value="2"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        :width="300"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
      >
        <template slot-scope="scope">
          <el-button
            v-if="type === 9"
            size="mini"
            type="danger"
            plain
            @click="handlefreeze(scope.row)"
          >
            冻结
          </el-button>
          <el-button
            v-if="type === 9"
            size="mini"
            type="primary"
            plain
            @click="handleunfreeze(scope.row)"
          >
            解封
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="editRow(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="delRow(scope.row)"
          >
            删除
          </el-button>
        </template>
      </app-table>
    </div>
    <el-dialog
      title="添加员工"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-form-item label="性别" prop="sex">
                  <el-select
                    v-model="ruleForm.sex"
                    size="medium"
                    clearable
                    placeholder="性别"
                    filterable
                    style="width: 100%;"
                  >
                    <el-option :key="0" label="男" :value="1"></el-option>
                    <el-option :key="1" label="女" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                <el-form-item label="电话" prop="mobile">
                  <el-input v-model="ruleForm.mobile" placeholder="请输入电话"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.age" placeholder="请输入年龄"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
              <el-form-item label="身份证号" prop="id_card">
                <el-input v-model="ruleForm.id_card" @change="handleChangeCard" placeholder="请输入身份证号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
              <el-form-item label="家庭住址" prop="address">
                <el-input v-model="ruleForm.address" placeholder="请输入家庭住址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="入职时间" prop="in_time">
                <el-date-picker
                  v-model="ruleForm.in_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期时间"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="归属部门" prop="departType">
                <el-select
                  v-model="ruleForm.departType"
                  size="medium"
                  clearable
                  placeholder="请选择部门归属"
                  filterable
                  style="width: 100%;"
                  @change="handleDepartType"
                >
                  <el-option :key="0" label="行政部" :value="1"></el-option>
                  <el-option :key="1" label="业务部" :value="2"></el-option>
                  <el-option :key="2" label="运营中心" :value="3"></el-option>
                  <el-option :key="3" label="护理部" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="部门" prop="depart">
                <el-select
                  v-model="ruleForm.depart"
                  size="medium"
                  clearable
                  placeholder="请选择部门"
                  filterable
                  style="width: 100%;"
                  @change="handleDepart"
                >
                  <el-option v-for="(item, index) in departTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="角色" prop="role_id">
                <el-select
                  v-model="ruleForm.role_id"
                  size="medium"
                  clearable
                  placeholder="选择角色"
                  filterable
                  style="width: 100%;"
                >
                  <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="type == 9">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="权限" prop="type">
                <el-select
                  v-model="ruleForm.type"
                  size="medium"
                  clearable
                  placeholder="选择权限"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="1" label="员工" :value="1"></el-option>
                  <el-option :key="2" label="上门服务" :value="2"></el-option>
                  <el-option :key="3" label="部门领导" :value="3"></el-option>
                  <el-option :key="9" label="系统管理员" :value="9"></el-option>
                 <!-- <el-option :key="2" label="护工" :value="2"></el-option> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="紧急联系人" prop="emergency_name">
                <el-input v-model="ruleForm.emergency_name" placeholder="请输入紧急联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="联系人电话" prop="emergency_mobile">
                <el-input v-model="ruleForm.emergency_mobile" placeholder="请输入紧急联系人联系方式"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :offset="1" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-tooltip class="item" effect="dark" content="请先下载安装摄像头驱动程序，再尝试打开摄像头，如已安装请忽略" placement="top-start">
                <el-button size="medium" type="primary" @click="handleClickPhoto(true)">开启拍照功能</el-button>
              </el-tooltip>
              <el-button size="medium" type="primary" @click="handleClickPhoto(false)">关闭拍照功能</el-button>
              <el-tooltip class="item" effect="dark" content="下载驱动后请安装" placement="top-start">
                <el-button size="medium">
                  <a href="http://test.yanglao12349.com/摄像头驱动程序.exe">下载驱动</a>
                </el-button>
              </el-tooltip>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-form-item label="员工照片" prop="avatar">
                <el-row>
                  <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                  <div @click="handleResultAvatar">
                     <img-upload
                      v-model="ruleForm.profile"
                      tips="老人照片"
                      method="profile"
                      :imgurl="profile_img"
                      :updisabled="upDisabled"
                      @result="resultAvatar"
                    ></img-upload>
                  </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
              <el-form-item label="证件照" prop="id_card_front">
                <el-row>
                  <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                  <div @click="handleResultFront">
                    <img-upload
                      v-model="ruleForm.id_card_front"
                      tips="身份证正面"
                      method="id_card"
                      :imgurl="id_card_front_img"
                      :updisabled="upDisabled"
                      @result="resultFront"
                    ></img-upload>
                  </div>
                  </el-col>
                  <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
                  <div @click="handleResultBack">
                    <img-upload
                      v-model="ruleForm.id_card_back"
                      tips="身份证反面"
                      method="id_card"
                      :imgurl="id_card_back_img"
                      :updisabled="upDisabled"
                      @result="resultBack"
                    ></img-upload>
                  </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="ruleForm.remark"
                  :rows="5"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="medium" @click="save">
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('ruleForm')"
          >
            取 消
          </el-button>
        </div>
        <div v-show="cameraDialog" class="cameraDialog_wrap" @touchmove.prevent @mousewheel.prevent>
          <el-select v-model="capType" placeholder="请选择" @change="handleChangeCap">
            <el-option key="0" label="员工照片" value="profile"></el-option>
            <el-option key="1" label="身份证正面" value="id_card_front">身份证正面</el-option>
            <el-option key="2" label="身份证反面" value="id_card_back">身份证反面</el-option>
          </el-select>
          <el-button type="primary" :loading="captureLoading" @click="Capture">{{captureLoading ? '正在上传中' : '拍照并上传'}}</el-button>
          <div id="ActiveXDivOne" ref="ActiveXDivOne" width="100%" height="400px"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import imgUpload from "@/components/AppUpload/index";
  import { getList } from "@/api/nursemanager";
  import { mapGetters } from "vuex";
  import { getrole, unfreeze, freeze, branchsearch, rolesearch } from "@/api/depart";
  import { uploadImg } from "@/api/oldermanager";
   import { getCarddetail, getBirthdayage } from "@/utils";
  export default {
    name: "Index",
    components: { appTable, imgUpload },
    data() {
      return {
        key: Math.random(),
        loading: false,
        dialogVisible: false,
        ruleForm: {},
        formData: {},
        rules: {
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          mobile: [{ required: true, message: "输入电话", trigger: "blur" }],
          sex: [{ required: true, message: "输入电话", trigger: "change" }],
          type: [{ required: true, message: "选择身份", trigger: "change" }],
          role_id: [{ required: true, message: "选择角色", trigger: "change" }],
        },
        currentSelectedData: [],
        pageData: {
          type: -1
        },
        selectForm: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {
            // return time.getTime() > Date.now();
          },
        },
        tableColumns: [
          { prop: "id", label: "工号" },
          { prop: "name", label: "姓名" },
          { prop: "mobile", label: "电话" },
          { prop: "type", label: "身份", formatter: this.typeFormatter },
          { prop: "branch_name", label: "所属部门" },
          { prop: "role_name", label: "所属角色" },
          {
            prop: "is_freeze",
            label: "角色状态",
            formatter: this.statusFormatter,
          },
        ],
        roleList: [],
        departTypeList: [],
        // 拍照
        profile_img: "",
        cameraDialog: false,
        camPlugins: {},
        upDisabled: false,
        methodType: "profile",
        id_card_front_img: "",
        id_card_back_img: "",
        captureLoading: false,
        capType: "profile",
      };
    },
    computed: {
      ...mapGetters({
        avatar: "user/avatar",
        username: "user/username",
        name: "user/name",
        type: "user/type",
      }),
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
      // getrole('get', {page_size: 100}).then(res => {
      //   this.roleList = res.data.list;
      // })
    },
    methods: {
      handleChangeCap(value) {
        if(value == "profile"){
          this.camPlugins.ChangeDevice(1)
        } else {
          this.camPlugins.ChangeDevice(0)
        }
        this.methodType = value
      },
      handleResultAvatar() {
        console.log(this.camPlugins.obj)
        this.camPlugins.ChangeDevice(1)
        this.methodType = "profile";
      },
      handleResultFront() {
        this.camPlugins.ChangeDevice(0)
        this.methodType = "id_card_front";
      },
      handleResultBack() {
        this.camPlugins.ChangeDevice(0)
        this.methodType = "id_card_back";
      },
      resultAvatar(data) {
        this.$set(this.ruleForm, "profile_id", data.id);
      },
      resultFront(data) {
        this.$set(this.ruleForm, "front_id", data.id);
      },
      resultBack(data) {
        this.$set(this.ruleForm, "back_id", data.id);
      },
      handleClickPhoto(bool) {
        this.$nextTick(() => {
          if(bool) {
            this.camPlugins.ChangeDevice(1)
            if(!this.camPlugins.obj.success) {
              this.upDisabled = false;
              this.cameraDialog = false;
              this.$message.error("请先连接设备，再进行拍照或下载安装驱动程序")
            } else {
              this.upDisabled = true;
              this.cameraDialog = true;
            }
          } else {
            this.upDisabled = false;
            this.cameraDialog = false;
            this.camPlugins.ChangeDevice(2)
          }
        })
      },
      //拍照
      Capture() {
        const _this = this;
        this.camPlugins.Capture();
        this.captureLoading = true;
        setTimeout(function() {
          _this.funUpdataBase64();
        }, 1500);
      },
      handleChangeCard(value) {
        const userInfo = getCarddetail(value);
        if (userInfo) {
          this.$set(this.ruleForm, "age", userInfo.age);
          this.$set(this.ruleForm, "sex", userInfo.sex);
        }
      },
      //上传图片
      async funUpdataBase64() {
        let strImgBase64 = this.camPlugins.obj.base64Data.split(',')[1];
        let $Blob = getBlobBydataURI(strImgBase64, 'image/jpeg');
        let formData = new FormData();
        formData.append("file", $Blob, "file_" + Date.parse(new Date()) + ".jpeg");
        let methodType = this.methodType == "profile" ? 'profile' : 'id_card';
        formData.append("method", methodType)
        uploadImg("post", formData).then(res => {
          this.captureLoading = false;
          const data = res.data;
          if(this.methodType == "profile") {
            this.$set(this.ruleForm, "profile_id", data.id);
            this.profile_img = this.camPlugins.obj.base64Data;
          } else if(this.methodType == "id_card_front"){
            this.$set(this.ruleForm, "front_id", data.id);
            this.id_card_front_img = this.camPlugins.obj.base64Data;
          } else {
            this.$set(this.ruleForm, "back_id", data.id);
            this.id_card_back_img = this.camPlugins.obj.base64Data;
          }
          let dataBase64 = (this.camPlugins.obj.base64Data.split(',')[1]).replace(/\r/g, "");
          if(this.camPlugins.obj.base64Data && this.methodType == "id_card_front"){
            //token "24.c2c6828ab244a8b4ef77ba8b1763ede3.2592000.1622514798.282335-24102043"
            getidcardapi("post", {
              img: dataBase64,
              // token: tokenData.access_token || localStorage.getItem("client_token") || "24.c2c6828ab244a8b4ef77ba8b1763ede3.2592000.1622514798.282335-24102043"
            }).then(res => {
              const data = JSON.parse(res.data);
              if(data.image_status == 'normal') {
                this.$set(this.ruleForm, "name", data.words_result["姓名"].words);
                this.$set(this.ruleForm, "id_card", data.words_result["公民身份号码"].words);
                this.handleChangeCard(data.words_result["公民身份号码"].words)
              }
              switch (data.image_status) {
                case 'normal':
                  this.$message({
                    type: "success",
                    message: "识别完成",
                  });
                  break;
                case 'reversed_side':
                  this.$message({
                    type: "success",
                    message: "身份证正反面颠倒",
                  });
                  break;
                case 'non_idcard':
                  this.$message({
                    type: "success",
                    message: "上传的图片中不包含身份证",
                  });
                  break;
                case 'blurred':
                  this.$message({
                    type: "success",
                    message: "身份证模糊",
                  });
                  break;
                case 'other_type_card':
                  this.$message({
                    type: "success",
                    message: "请放至居民身份证进行拍照",
                  });
                  break;
                case 'over_exposure':
                  this.$message({
                    type: "success",
                    message: "身份证曝光严重，无法识别",
                  });
                  break;
                case 'over_dark':
                  this.$message({
                    type: "success",
                    message: "亮度太低，请打开光源",
                  });
                  break;
              }
              switch (data.idcard_number_type) {
                case -1:
                  this.$message({
                    type: "success",
                    message: "身份证正面所有字段全为空",
                  });
                  break;
                case 0:
                  this.$message({
                    type: "success",
                    message: "身份证证号不合法，此情况下不返回身份证证号",
                  });
                  break;
                case 2:
                  this.$message({
                    type: "success",
                    message: "身份证证号和性别、出生信息都不一致",
                  });
                  break;
                case 3:
                  this.$message({
                    type: "success",
                    message: "身份证证号和出生信息不一致",
                  });
                  break;
                case 4:
                  this.$message({
                    type: "success",
                    message: "身份证证号和性别信息不一致",
                  });
                  break;
                default:
                  break;
              }
            })
          }
        })
      },
      handleDepartType(value) {
        branchsearch({type: value}).then(res => {
          this.departTypeList = res.data;
          if(res.data.length == 0) {
            this.$set(this.ruleForm, "depart", "")
            this.$set(this.ruleForm, "role_id", "")
            this.roleList = [];
          } else {
            this.$set(this.ruleForm, "depart", res.data[0].id)
            this.handleDepart(res.data[0].id)
          }
        })
      },
      handleDepart(value) {
        rolesearch({ branch_id: value}).then(res => {
          this.roleList = res.data;
          if(res.data.length == 0) {
            this.$set(this.ruleForm, "role_id", "")
          } else {
            this.$set(this.ruleForm, "role_id", res.data[0].id)
          }
        })
      },
      statusFormatter(row, column) {
        if (row.is_freeze == 1) {
          return "冻结";
        } else if(row.is_freeze == 0){
          return "正常";
        }
      },
      typeFormatter(row) {
        if (row.type == 9) {
          return "系统管理员";
        } else if (row.type == 1) {
          return "员工";
        } else if (row.type == 2) {
          return "上门服务人员";
        } else if (row.type == 3) {
          return "部门领导";
        }
      },
      handlefreeze(row) {
        freeze({id: row.id}).then(res => {
          if(res.code == 200) {
            this.$message({
              type: "success",
              message: "冻结成功！",
            });
            this.getTableData();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        })
      },
      handleunfreeze(row) {
        unfreeze({id: row.id}).then(res => {
          if(res.code == 200) {
            this.$message({
              type: "success",
              message: "解封成功！",
            });
            this.getTableData();
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        })
      },
      getTableData() {
        let data = this.selectForm;
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = Object.assign(resp.data, { type: -1 });
          }
        });
      },
      editRow(row) {
         this.dialogVisible = true;
         this.$nextTick(() => {
            if(this.$refs.ActiveXDivOne) {
              const _this = this;
              this.camPlugins = new CarmerPlugins({camidMain: 1}, function(obj){
                obj.StartVideo()
                _this.camPlugins.ChangeDevice(1)
              });
            }
          })
         console.log(row)
        this.ruleForm = {...row, in_time: row.in_time && row.in_time.toString() || ""};
        branchsearch({type: row.branch_type}).then(res => {
          this.departTypeList = res.data;
          rolesearch({ branch_id: row.branch_id}).then(res => {
            this.roleList = res.data;
            this.ruleForm = {...row, in_time: row.in_time && row.in_time.toString() || "", departType: row.branch_type, depart: row.branch_id};
          })
        })
      },
      delRow(row) {
        this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let param = {
                id: row.id,
              };
              getList("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
      },
      save() {
        delete this.ruleForm.password
        this.$refs["ruleForm"].validate(async (valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              let params = {
                id: this.ruleForm.id,
                name: this.ruleForm.name,
                mobile: this.ruleForm.mobile,
                type: this.type == 9 ? this.ruleForm.type : 1,
                role_id: this.ruleForm.role_id
              }
              getList("put", Object.assign(this.ruleForm, params)).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.getTableData();
                  this.cancel("ruleForm");
                }
              });
            } else {
              getList("post", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.getTableData();
                  this.cancel("ruleForm");
                } else {
                  this.$message({
                    type: "error",
                    message: resp.msg,
                  });
                }
              });
            }
          }
        });
      },
      handleAdd() {
        this.dialogVisible = true;
        this.$nextTick(() => {
          if(this.$refs.ActiveXDivOne) {
            const _this = this;
            this.camPlugins = new CarmerPlugins({camidMain: 1}, function(obj){
              obj.StartVideo()
              _this.camPlugins.ChangeDevice(1)
            });
          }
        })
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        this.selectForm.page = val;
        this.getTableData();
      },
      cancel(formName) {
        this.dialogVisible = false;
        this.ruleForm = {};
        this.$refs[formName].resetFields();
      },
      closeDialog() {
        this.dialogVisible = false;
        this.$refs["ruleForm"].resetFields();
        this.ruleForm = {};
      },
      search() {
        this.selectForm.page = 1;
        this.getTableData();
      },
    },
  };
</script>
<style lang="scss" scoped>
.dialog-main{
  position: relative;
  width: 80%;
}
.cameraDialog_wrap{
  position: absolute;
  text-align: center;
  right: -83%;
  top: 24%;
  .el-select{
    float: left;
  }
  button{
    margin-left: 20px;
    float: left;
    margin-bottom: 20px;
  }
}
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        width: 100%;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }
    }

    .form-footer {
      padding-left: 100px;
    }
  }
</style>
